<template>
    <h2>修改门店注册</h2>
   
    <table class="table table-bordered" border="2px">
        <tr>
            <td>门店名称</td>
            <td>
                <input type="text" placeholder="请输入门店名称" v-model="shopinfo.Shop_Name"/>
            </td>
        </tr>
        <tr>
            <td>分店名称</td>
            <td>
                <input type="text" placeholder="请输入分店名称" v-model="shopinfo.Shop_BranchName"/>
            </td>
        </tr>
        <tr>
            <td>门店地址</td>
            <td>
                <input type="text" placeholder="请输入门店地址" v-model="shopinfo.Shop_Address"/>
            </td>
        </tr>
        <tr>
            <td>门店电话</td>
            <td>
                <input type="text" placeholder="请输入门店电话" v-model="shopinfo.Shop_Phone"/>
            </td>
        </tr>
        <tr>
            <td>门店状态</td>
            <td>
                <input type="radio" :value="true" v-model="shopinfo.Shpo_State"/>营业中
                <input type="radio" :value="false" v-model="shopinfo.Shpo_State"/>休息中
            </td>
        </tr>
        <tr>
            <td>门店介绍</td>
            <td>
                <textarea cols="20" rows="5" placeholder="请输入门店介绍"  v-model="shopinfo.Shop_Info"></textarea>
            </td>
        </tr>
        <tr>
            <td>入住须知</td>
            <td>
                <textarea cols="20" rows="5" placeholder="请输入入住须知" v-model="shopinfo.Shop_Notice"></textarea>
            </td>
        </tr>
        <tr>
            <td>交通信息</td>
            <td>
                <textarea cols="20" rows="5" placeholder="请输入交通信息" v-model="shopinfo.Shop_Traffic"></textarea>
            </td>
        </tr>
        <tr>
            <td>门头图片</td>
            <td>
                <img style="width: 100px;height: 110px;" :src="shopinfo.Shop_Img" ><br>
                <input type="file" @change="FileUpLoads"/>
            </td>
        </tr>
        <tr>
            <td colspan="2" style="text-align: center;">
                <input type="button" value="保存" class="btn btn-success" @click="AddShop"/>
            </td>
        </tr>

    </table>


</template>
<script setup lang="ts">
import axios from 'axios';
import { useRouter,useRoute, routeLocationKey } from 'vue-router';
import { onMounted,ref } from 'vue';

onMounted(()=>{
    GetShop();
})

const route=useRoute();
const router=useRouter();

//实现图片上传功能
const FileUpLoads=(e:any)=>{
    //1.获取文件对象 
    // 将事件对象中的targer属性files列表中的第一个文件赋值给属性
    var file=e.target.files[0];

    //2.创建一个FormData表单数据对象
    var fd=new FormData();

    //3.将文件对象添加到表单数据对象中 append():保存方法 
    // 存储数据方式通过 键值对形式保存
    fd.append("img",file)

    //4.使用Axios发送请求
    axios.post("https://localhost:7035/api/Files/FileUpload",fd)
    .then(res=>{
        console.log(res.data);
        shopinfo.value.Shop_Img=res.data
    })
    .catch(error=>{
        console.log(error)
    })
}
//获取门店id
const idd=route.params.id

//获取门店信息进行反填
const GetShop=()=>{
    axios.get("https://localhost:7035/api/Shop/GetShopinfo?id="+idd)
    .then(res=>{
        shopinfo.value=res.data
    })
}
//创建响应式数据
const shopinfo=ref({
    "Shop_Id": 0,
    "Shop_Name": "",
    "Shop_BranchName": "",
    "Shop_Address": "",
    "Shop_Phone": "",
    "Shpo_State": true,
    "Shop_Info": "",
    "Shop_Notice": "",
    "Shop_Traffic": "",
    "Shop_Img": ""
})

//修改
const AddShop=()=>{
    if(shopinfo.value.Shop_Name==""){
        alert("请输入门店名称")
        return;
    }
    if(shopinfo.value.Shop_BranchName==""){
        alert("请输入分店名称")
        return;
    }
    if(shopinfo.value.Shop_Address==""){
        alert("请输入门店地址")
        return;
    }
    if(shopinfo.value.Shop_Phone==""){
        alert("请输入门店电话")
        return;
    }
    if(shopinfo.value.Shop_Info==""){
        alert("请输入门店介绍")
        return;
    }
    if(shopinfo.value.Shop_Notice==""){
        alert("请输入入住须知")
        return;
    }
    if(shopinfo.value.Shop_Traffic==""){
        alert("请输入交通信息")
        return;
    }
    axios.put("https://localhost:7035/api/Shop/EditShopInfo",shopinfo.value)
    .then(res=>{
        if(res.data>0){
            alert('修改成功')
            router.push("/ShowShops");
        }
        else{
            alert('修改失败')
        }
    })
    .catch
}





</script>